
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <script src="/static/bjui12/js/jquery-1.7.2.min.js"></script>

    <link type="text/css" href="/static/fw/lib/jquery-ui-1.8.4.custom/css/smoothness/jquery-ui-1.8.4.custom.css"  rel="stylesheet" />
    <script type="text/javascript" src="/static/fw/lib/jquery-ui-1.8.4.custom/js/jquery-ui-1.8.4.custom.min.js"></script>

    <script type="text/javascript" src="/static/fw/lib/raphael-min.js"></script>
    <script type="text/javascript" src="/static/fw/myflow.js"></script>

    <!--<script type="text/javascript" src="myflow.editors.js"></script>-->

    <script type="text/javascript">

        $(function(){
            var myflow = $.myflow;

            $.extend(true,myflow.config.rect,{
                attr : {
                    r : 8,
                    fill : '#F6F7FF',
                    stroke : '#03689A',
                    "stroke-width" : 2
                },margin:0
            });
            $.extend(true,myflow.config.tools.states,{
                start : {
                    showType: 'image',
                    type : 'start',
                    name : {text:'<<start>>'},
                    text : {text:'开始'},
                    img : {src : '/static/fw/img/48/start_event_empty.png',width : 48, height:48},
                    attr : {width:50 ,heigth:50 }
                },
                end : {showType: 'image',type : 'end',
                    name : {text:'<<end>>'},
                    text : {text:'结束'},
                    img : {src : '/static/fw/img/48/end_event_terminate.png',width : 48, height:48},
                    attr : {width:50 ,heigth:50 }
                },
                'end-cancel' : {showType: 'image',type : 'end-cancel',
                    name : {text:'<<end-cancel>>'},
                    text : {text:'取消'},
                    img : {src : '/static/fw/img/48/end_event_cancel.png',width : 48, height:48},
                    attr : {width:50 ,heigth:50 }
                },
                'end-error' : {showType: 'image',type : 'end-error',
                    name : {text:'<<end-error>>'},
                    text : {text:'错误'},
                    img : {src : '/static/fw/img/48/end_event_error.png',width : 48, height:48},
                    attr : {width:50 ,heigth:50 }
                },
                state : {showType: 'text',type : 'state',
                    name : {text:'<<state>>'},
                    text : {text:'状态'},
                    img : {src : '/static/fw/img/48/task_empty.png',width : 48, height:48}
                },
                fork : {showType: 'image',type : 'fork',
                    name : {text:'<<fork>>'},
                    text : {text:'分支'},
                    img : {src : '/static/fw/img/48/gateway_parallel.png',width :48, height:48},
                    attr : {width:50 ,heigth:50 }
                },
                join : {showType: 'image',type : 'join',
                    name : {text:'<<join>>'},
                    text : {text:'合并'},
                    img : {src : '/static/fw/img/48/gateway_parallel.png',width :48, height:48},
                    attr : {width:50 ,heigth:50 }
                },
                task : {showType: 'text',type : 'task',
                    name : {text:'<<task>>'},
                    text : {text:'任务'},
                    img : {src : '/static/fw/img/48/task_empty.png',width :48, height:48}
                },
                decision : {showType: 'image',type : 'decision',
                    name : {text:'<<decision>>'},
                    text : {text:'决定'},
                    img : {src : '/static/fw/img/48/gateway_parallel.png',width :48, height:48},
                    attr : {width:50 ,heigth:50 }
                }
            });

            $('#myflow').myflow({basePath : "",
                restore : eval("(<%- flowMap%>)"),
                editable:false,
                activeRects : {// 当前激活状态
                    rects : []
                },
                historyRects : {// 历史激活状态
                    rects : []
                }});

        });
    </script>
    <style type="text/css">
        .flow_map {
            margin: 0;
            pading: 0;
            text-align: left;
            font-family: Arial, sans-serif, Helvetica, Tahoma;
            font-size: 12px;
            line-height: 1.5;
            color: black;
            background-image: url(/static/fw/img/bg.png);
        }

        .flow_node {
            width: 70px;
            text-align: center;
            vertical-align: middle;
            border: 1px solid #fff;
        }

        .flow_mover {
            border: 1px solid #ddd;
            background-color: #ddd;
        }

        .flow_selected {
            background-color: #ddd;
        }

        .flow_state {

        }
    </style>

</head>
<body >

<div id="myflow" class="flow_map">

</div>
</body>
</html>
